<template>
  <nav-bar :title="title" left-text="" left-arrow @click-left="onClickLeft" />
  <p>{{ name }}</p>
  <img
    src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvmgy3chw4djslidqj2n5wt6mmwu8srur4e2861c5-4bde-4184-9087-089ee62a8290"
    alt=""
  />
</template>
<script setup>
import { ref } from "vue";
//点击返回
import { useRouter, useRoute } from "vue-router";
import { NavBar } from "vant";
const onClickLeft = () => {
  router.go(-1);
};
const router = useRouter();

//接收query参数
const route = useRoute();
const title = ref("观看历史");
const abc = ref("");
let name = ref("");
// console.log(data);

const loadData = async () => {
  const data = await route.query.id;
  console.log(data);
  abc.value = data.value;
  if (data == 1) {
    title.value = "我的收藏";
    name.value = "您暂时没有任何收藏";
  } else {
  }
};
const loadDatatwo = async () => {
  const data = await route.query.id;
  console.log(data);
  abc.value = data.value;
  if (data == 2) {
    title.value = "观看历史";
    name.value = "您暂时没有任何观看历史";
  } else {
  }
};
const loadDatathree = async () => {
  const data = await route.query.id;
  console.log(data);
  abc.value = data.value;
  if (data == 3) {
    title.value = "任务中心";
    name.value = "您暂时没有任何任务";
  } else {
  }
};
loadData();
loadDatatwo();
loadDatathree();
</script>
<style scoped>
p {
  text-align: center;
  font-size: 1.3rem;
  margin-top: 40vw;
  color: #007af4;
}
img {
  width: 80vw;
  margin-top: 10vw;
  margin-left: calc(50% - 40vw);
}
</style>
